import React, { useState } from "react";
import "./header.css";
import { DownOutlined } from "@ant-design/icons";
import { connect } from "react-redux";
import Content from "../Contents/index";
// import WorkFooter from "../add/WorkFooterer";

import { Modal, Table, Tag, Space, Input } from "antd";

// import { UploadOutlined } from "@ant-design/icons";
import List from "../List/list";
// import Modals from "../Modal/Modal";
import { Tabs } from "antd";
// const { TextArea } = Input;
const { TabPane } = Tabs;
// import { Link} from 'react-router-dom'

function Header(props) {
  console.log("Header渲染了");

  const [classIndex, setClassIndex] = useState(0);
  function changeClass(e) {
    setClassIndex(e.currentTarget.getAttribute("data-index"));
  }
  // function search() {
  //   alert("撞单查询");
  // }
  // function newcus() {
  //   alert("新增客户");
  // }
  const onChange = (key) => {
    console.log(key);
  };
  const columns = [
    {
      title: "Name",
      dataIndex: "name",
      key: "name",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "Age",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "Address",
      dataIndex: "address",
      key: "address",
    },
    {
      title: "Tags",
      key: "tags",
      dataIndex: "tags",
      render: (_, { tags }) => (
        <>
          {tags.map((tag) => {
            let color = tag.length > 5 ? "geekblue" : "green";

            if (tag === "loser") {
              color = "volcano";
            }

            return (
              <Tag color={color} key={tag}>
                {tag.toUpperCase()}
              </Tag>
            );
          })}
        </>
      ),
    },
    {
      title: "Action",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
  const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"],
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"],
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
    {
      key: "4",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"],
    },
  ];
  const [arrowchange, setArrowchange] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  function clickHeighSearch() {
    setArrowchange(!arrowchange);
    if (arrowchange) {
      props.showDown();
    } else {
      props.showUp();
    }
  }
  const callbackTabClicked = (key, event) => {
    console.log(key);
    console.log(event);
    if (key === "3") {
      console.log("tab 3 clicked...");
    }
  };
  return (
    <div id="header">
      <div className="headers">
        <Tabs
          defaultActiveKey="1"
          onChange={onChange}
          onTabClick={callbackTabClicked}
        >
          <TabPane tab="跟单列表" key="1" defaultActiveKey>
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
          <TabPane tab="今日跟进" key="2">
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
          <TabPane tab="本周跟进" key="3">
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
          <TabPane tab="今日跟单记录" key="4">
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
          <TabPane tab="本周跟单记录" key="5">
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
          <TabPane tab="本月跟单记录" key="6">
            <div className="rightSearch">
              <div>
                <input type="text" />
              </div>
              <div>搜索</div>
              <div onClick={clickHeighSearch}>
                高级搜索
                <span>
                  <DownOutlined
                    className={arrowchange ? "arrowup" : "arrowdown"}
                  />
                </span>
              </div>
            </div>
            <Content />
            <List></List>
          </TabPane>
        </Tabs>
        <div className="leftTitle">
          <div
            className={"6" === classIndex ? "active" : ""}
            onClick={changeClass}
            data-index="6"
          >
            <span>数据导出</span>
          </div>
          <div className={"7" === classIndex ? "active" : ""} data-index="7">
            <span onClick={showModal}>新增跟单</span>
          </div>
          <div
            className={"8" === classIndex ? "active" : ""}
            onClick={changeClass}
            data-index="8"
          >
            <span onClick={showModal}>自定义设置</span>
          </div>
        </div>
      </div>

      <>
        <Modal
          title="新增"
          visible={isModalVisible}
          width={1000}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <div className="AddWorkorder">
            <div className="AddWorkorderHead">
              <input placeholder="客户名称、联系人、手机号码" />
              <button className="toSearch">立即搜索</button>
            </div>
            <br />
            <div className="AddWorkorderContent">
              <span>||单击一下表格即可选中客户||</span>
              <button>新增客户</button>
            </div>

            <div className="AddWorkorderText">无关联客户点击此处</div>
            <Table columns={columns} dataSource={data} pagination={false} />
            <div className="AddWorkorderFoot"></div>
          </div>
        </Modal>
      </>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    isShow: state.isShow,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    showDown() {
      const action = { type: "showDown" };
      dispatch(action);
    },
    showUp() {
      const action = { type: "showUp" };
      dispatch(action);
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Header);
